<template>

    <div class="error">
        <!--<h2 class="error-code">{{code}}</h2>-->
        <!--<div class="error-msg">{{message}}</div>-->


        <div class="da-wrapper">
            <div class="da-content">
                <div class="da-container clearfix">
                    <div class="da-error-wrapper">
                        <div class="da-error-pin"></div>
                        <div class="da-error-code">
                            <p class="tip">STATUS:{{code}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="error-msg">
            <p class="tip3">{{message}}</p>
        </div>
        <slot></slot>

    </div>

</template>

<script>
    export default {
        name: 'error',
        props: {
            code: {
                type: String,
                default: 'unknown code'
            },
            message: {
                type: String,
                default: '未知错误消息'
            }
        }
    };
</script>

<style scoped>

    .error{
        width: 100%;
        height: 100%;
        text-align: center;

    }


    div.da-wrapper {
        width: 100%;
        height: auto;
        min-height: 100%;
        position: relative;
        min-width: 320px
    }

    div.da-wrapper .da-container {
        width: 96%;
        margin: auto
    }

    div.da-content {
        clear: both;
    }

    @media only screen and (max-width:480px) {
        div.da-content {
            margin-top: auto
        }
    }

    div.da-error-wrapper {
        width: 320px;
        padding: 30px 0;
        margin: auto;
        position: relative
    }

    div.da-error-wrapper .da-error-heading {
        color: #e15656;
        font-size: 24px;
        font-family: Georgia, "Times New Roman", Times, serif
    }

    @-webkit-keyframes error-swing {
        0% {
            -webkit-transform: rotate(1deg)
        }

        100% {
            -webkit-transform: rotate(-2deg)
        }
    }

    @-moz-keyframes error-swing {
        0% {
            -moz-transform: rotate(1deg)
        }

        100% {
            -moz-transform: rotate(-2deg)
        }
    }

    @keyframes error-swing {
        0% {
            transform: rotate(1deg)
        }

        100% {
            transform: rotate(-2deg)
        }
    }

    div.da-error-wrapper .da-error-code {
        width: 285px;
        height: 170px;
        line-height: 100px;
        padding: 127px 16px 0 16px;
        position: relative;
        margin: auto;
        margin-bottom: 20px;
        z-index: 5;
        /*line-height: 1;*/
        font-size: 32px;
        text-align: center;
        background: url("~@/assets/error/error-hanger.png") no-repeat center center;
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        transform-origin: center top;
        -webkit-animation: error-swing infinite 2s ease-in-out alternate;
        -moz-animation: error-swing infinite 2s ease-in-out alternate;
        animation: error-swing infinite 2s ease-in-out alternate
    }

    div.da-error-wrapper .da-error-code .tip {
        padding-top: 2px;
        color: #e15656;
    }

    div.da-error-wrapper .da-error-code .tip2 {
        padding-top: 15px;
    }

    div.da-error-wrapper .da-error-code .tip3 {
        padding-top: 20px;
        font-size: 16px;
        color: #e15656;
    }

    div.da-error-wrapper .da-error-pin {
        width: 38px;
        height: 38px;
        display: block;
        margin: auto;
        margin-bottom: -27px;
        z-index: 10;
        position: relative;
        background: url("~@/assets/error/error-pin.png") no-repeat center center
    }

    p {
        margin: 0;
        padding: 0;
    }

    .error-msg{
        width: 80%;
        margin: auto;
        margin-bottom: 10px;
        max-height: 200px;
        overflow: auto;
    }

</style>